<script setup>
import { useVModel } from "@/utils/useVModel";
const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
	roleList: {
		type: Array,
		default: () => [],
		required: true,
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);
const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	const entries = Object.entries(formRef.value.$.exposed);
	for (const [key, value] of entries) {
		instance.exposed[key] = value;
	}
});
defineExpose({ ...instance.exposed });

const rules = ref({
	accountName: [{ required: true, message: "请输入账号名称", trigger: "change" }],
	nickName: [{ required: true, message: "请输入名称", trigger: "change" }],
	phone: [{ required: true, message: "请输入手机号码", trigger: "change" }],
});
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="120px" ref="formRef">
		<el-form-item label="账号名称" prop="accountName">
			<el-input v-model="model.accountName" />
		</el-form-item>
		<el-form-item label="用户名" prop="nickName">
			<el-input v-model="model.nickName" />
		</el-form-item>
		<el-form-item label="手机号码" prop="phone">
			<el-input v-model="model.phone" />
		</el-form-item>
		<el-form-item label="角色" prop="roleIds">
			<el-checkbox-group v-model="model.roleIds">
				<el-checkbox :label="item.id" v-for="item in roleList" :key="item.id">{{ item.name }}</el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="备注">
			<el-input v-model="model.note" />
		</el-form-item>
		<el-form-item label="状态">
			<el-switch v-model="model.status" :active-value="0" :inactive-value="1" />
		</el-form-item>
	</el-form>
</template>
